<script setup lang="ts">
import { h, onMounted, reactive, ref } from "vue";
import { NButton, zhCN, dateZhCN, useMessage, NText } from "naive-ui";
import { userAuditStore } from "@/stores/MerAudit";
const AuditStore = userAuditStore();
const message = useMessage();

const columns = [
  {
    type: "selection",
    disabled(row: RowData) {
      return row.name === "select";
    },
  },
  {
    title: "#",
    key: "no",
    render: (_, index) => {
      return `${index + 1}`;
    },
  },
  {
    title: "商户名",
    key: "name",
  },
  {
    title: "店铺名称",
    key: "introduction",
  },
  {
    title: "店铺介绍",
    key: "introduction",
  },
  {
    title: "联系电话",
    key: "tel",
  },
  {
    title: "申请时间",
    key: "time",
    render(rowData: object, rowIndex: number) {
      if (rowData.status == 2) {
        return h(
          NText,
          {
            style: {
              color: "red",
            },
          },
          { default: () => String(new Date(rowData.time).getFullYear()) + "-" + String(new Date(rowData.time).getMonth() + 1).padStart(2, '0') + "-" + String(new Date(rowData.time).getDate()).padStart(2, '0') }
        )
      }
      return h(
        NText,
        {

        },
        { default: () => String(new Date(rowData.time).getFullYear()) + "-" + String(new Date(rowData.time).getMonth() + 1).padStart(2, '0') + "-" + String(new Date(rowData.time).getDate()).padStart(2, '0') }
      )
    }
  },
  {
    title: "店铺地址",
    key: "address",
  },
  {
    title: "操作",
    key: "actions",
    render(row: object) {
      return !row.status
        ? [
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              type: "primary",
              onClick: () => save(row),
            },
            { default: () => "通过" }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              type: "success",
              style: {
                marginLeft: "20px",
                color: "red",
                backgroundColor: "#00f",
              },
              onClick: () => modify(row),
            },
            {
              default: () => "拒绝",
            }
          )
        ]
        : row.status == 2
          ? h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              type: "primary",
              style: {
                color: "red",
                backgroundColor: "#00f",
              },
              onClick: () => chakan(row),
            },
            { default: () => "点击查看拒绝原因" }
          )
          : "";
    },
  },
];
onMounted(() => {
  AuditStore.getList();
});

// 动态设置表格  行的颜色
const rowClassName = (row) => {
  if (row.status == 2) {
    return "too-old";
  }
  return "";
};
// 点击通过按钮  把状态变成1
const save = (row) => {
  row.status = 1;
  AuditStore.getModify(row);
  AuditStore.getList();
};
//表单验证
const rules = {
  textvalue: {
    required: true,
    trigger: ["blur", "input"],
    message: "请填写拒绝理由",
  },
};
const formRef = ref(null);
const modifyArr = reactive({
  obj: {},
  Arr: [],
});
// 弹出框
const rowArr = ref();
const showModal = ref(false);
// 点击拒绝
const modify = (row) => {
  showModal.value = true;
  Object.assign(modifyArr.obj, row);
};
// 点击拒绝    弹出框
const form = reactive({
  textvalue: "",
});
// 确认按钮
const submitCallback = async () => {
  // 设置一个修改的数据
  // const rows = {
  //   status: 2,
  //   refuse: form.textvalue,
  // };
  if (modifyArr.Arr.length === 0) {
    modifyArr.obj.refuse = form.textvalue;
    modifyArr.obj.status = 2;
  } else {
    modifyArr.Arr.forEach((element, i) => {
      element.status = 2;
      element.refuse = form.textvalue;
      modifyArr.Arr[i] = element;
    });
  }
  formRef.value?.validate(async (errors: any) => {
    if (!errors) {
      if (modifyArr.Arr.length === 0) {
        await AuditStore.getModify(modifyArr.obj);
      } else {
        modifyArr.Arr.forEach(async (item) => {
          await AuditStore.getModify(item);
        });
      }
      showModal.value = false;
      modifyArr.obj = {};
      modifyArr.Arr = [];
      await AuditStore.getList();
    }
  });
  console.log(modifyArr);
};
// 取消
const cancelCallback = () => {
  showModal.value = false;
  form.textvalue = "";
  modifyArr.obj = {};
  modifyArr.Arr = [];
};
// 点击查看拒绝原因
const showModal2 = ref(false);
const chakanArr = ref();
const chakan = (row) => {
  // console.log(row);
  chakanArr.value = row.refuse;
  showModal2.value = true;
};
// 分页
const pages = (i) => {
  AuditStore.page = i;
  AuditStore.getList();
};
const pageSizes = (i) => {
  AuditStore.pageSize = i;
  AuditStore.page = 1;
  AuditStore.getList();
};
// checked 多选框
const checkedRowKeysRef = ref();
// 获取到 列
const rowKey = (row: any) => row;
const handleCheck = (rowKeys: DataTableRowKey[]) => {
  modifyArr.Arr = [...rowKeys];
};
// 点击批量拒绝
const deleteArr = () => {
  if (modifyArr.Arr.length == 0) {
    message.error("请您至少选中一个或以上的数据");
  } else {
    showModal.value = true;
  }
};
const saveArr = () => {
  modifyArr.Arr.forEach((i, v) => {
    if (i.status == 2) {
      message.error("当前数据有您已拒绝的数据，不可再通过，请重新选中");
      return;
    }
    modifyArr.Arr.forEach((i) => {
      i.status = 1;
      AuditStore.getModify(i);
      AuditStore.getList();
    });
  });
};
</script>
<template>
  <n-button type="info" @click="saveArr"> 批量审核通过</n-button>
  <n-button class="deA" strong secondary type="success" @click="deleteArr">
    批量拒绝
  </n-button>

  <n-data-table :columns="columns" :data="AuditStore.list" :bordered="false" :row-class-name="rowClassName"
    @update:checked-row-keys="handleCheck" :row-key="rowKey" />

  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
    <n-pagination v-model:page="AuditStore.page" v-model:page-size="AuditStore.pageSize" @update:page="pages"
      @update:page-size="pageSizes" :item-count="AuditStore.total" :page-sizes="[3, 5, 7, 10]" show-quick-jumper
      show-size-picker />
  </n-config-provider>
  <!-- 弹出框 -->
  <!-- :showIcon="false"  取消图标 -->
  <n-modal v-model:show="showModal" preset="dialog" title="拒绝商户" :showIcon="false">
    <n-form label-placement="left" label-width="auto" ref="formRef" :model="form" :rules="rules">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="16" label="拒绝理由" path="textvalue">
          <n-input v-model:value="form.textvalue" placeholder="请填写你的拒绝理由" type="textarea" />
        </n-form-item-gi>
        <n-form-item-gi :span="17" style="justify-self: center">
          <n-button type="default" @click="cancelCallback"> 取消 </n-button>
          <n-button type="info" class="save" @click="submitCallback">
            确认
          </n-button>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </n-modal>
  <!-- 查看拒绝原因 -->
  <n-modal v-model:show="showModal2">
    <n-card style="width: 600px" title="拒绝原因" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <n-input v-model:value="chakanArr" placeholder="" type="textarea" />
    </n-card>
  </n-modal>
</template>


<style scoped>
:deep(.too-old td) {
  color: rgba(255, 0, 0, 0.75) !important;
}

:deep(.age) {
  color: rgba(0, 128, 0, 0.75) !important;
}

:deep(.too-old .age) {
  color: rgba(0, 0, 128, 0.75) !important;
}

.n-data-table {
  padding: 20px 0;
}

.deA {
  margin-left: 30px;
}

.n-modal {
  width: 420px;
}

.save {
  margin-left: 70px;
}
</style>